@import 'base';

.btn_base{
  position: fixed;
  width: 50px;
  left: 5vw;
  top: 50%;
  padding: 10px 20px;
  border-radius: 10px;
  color: #fff;
  text-align: center;
  font-family:'Merienda', cursive;
  display: none;
}

section{
  box-sizing: border-box;
  width: 50vw;
  padding: 30px;
  //background-color: #d8d8d8;
  color: #d8d8d8;
  border-radius: 20px;
  font:bold 28px 'Merienda', cursive;
}

section p span{
  position: relative;
  display: inline-block;
  cursor: pointer;
  letter-spacing: 2px;
}

section p span.action{
  animation: smoke 2s linear;
  animation-fill-mode:forwards;
  transform-origin:bottom;
  z-index: 10;
}

@keyframes smoke {
  0%{
    opacity: 1;
    transform: translateX(0) translateY(0) rotate(0) scale(1);
    filter: blur(0);
  }
  100%{
    opacity: 0;
    transform: translateX(300px) translateY(-300px) rotate(1080deg) scale(3);
    filter: blur(100px);
    z-index: -1;
  }
}

.btn_action{
  @extend .btn_base;
  transform: translateY(-100%);
  background-color: #494799;
}
.btn_reverse{
  @extend .btn_base;
  transform: translateY(50%);
  background-color: #77a899;
}
.btn_reset{
  @extend .btn_base;
  transform: translateY(200%);
  background-color: #994788;
}

section p span.action_reverse{
  animation: smoke_reverse 2s linear;
  animation-fill-mode:forwards;
  transform-origin:bottom;
}

@keyframes smoke_reverse {
  0%{
    opacity: 0;
    transform: translateX(300px) translateY(-300px) rotate(1080deg) scale(3);
    filter: blur(100px);
    z-index: -1;
  }
  100%{
    opacity: 1;
    transform: translateX(0) translateY(0) rotate(0) scale(1);
    filter: blur(0);
  }
}